<template>
	<view class="wrap">
		<view class="to_back" @click="toBack"></view>
		<view class="title">
			{{title}}
		</view>
		<view class="section" v-if="title === '上料区'">
			<PointList :boxData1="upName" boxData2="K" @sentTask='upSentTask' />
		</view>

		<view class="section" v-if="title === '拣配区'">
			<PointListSm v-for="(el, i) in itemList" :key="i" :boxData1='el' boxData2='P' @sentTask='sentTask(el,2)' />
		</view>

		<view class="section" v-if="title === '空箱区'">
			<PointListSm v-for="(el, i) in itemList" :key="i" :boxData1='el' boxData2='H' @sentTask='sentTask(el,0)' />
		</view>

	</view>
</template>

<script>
	import PointList from '../component/pointListLong.vue'
	import PointListSm from '../component/pointList.vue'
	export default {
		data() {
			return {
				upName: '',
				title: '',
				itemList: [],
				itemList2: []
			}
		},
		components: {
			PointList,
			PointListSm
		},
		onLoad(a) {
			this.title = a.title
			if (a.title === '上料区') {
				this.upName = a.key
				return
			}
			if (a.title === '拣配区') {
				this.initData('2')
				return
			}
			if (a.title === '空箱区') {
				this.initData('3')
				return
			}
		},
		methods: {
			initData(key) {
				const that = this
				this.$api.postAPI('/task/getlistdatabytype?type=' + key, {}).then(res => {
					that.itemList = res.data
				})
			},
			toBack() {
				uni.navigateBack()
			},
			sentTask(key, type) {
				let that = this
				console.log(key, type, '++')
				const url = type === 2 ? '/Task/SendToFeedingArea' : '/Task/SendRcsEmptyRecoveryArea'
				uni.showModal({
					title: '提示',
					content: '确认是否提交[' + key + ']?',
					success: res => {
						if (res.cancel) return
						uni.showLoading({
							title: key + '提交中!',
							mask: true
						})
						const params = {
							"locationNo": key,
							"type": type
						}
						that.$api.postAPI(url, params).then(res => {
							uni.hideLoading()
							if (!res.success) {
								uni.showModal({
									title: '提示',
									content: '任务下发失败:' + res.data
								})
							} else {
								uni.showToast({
									title: '任务下发成功',
								})
							}
						})
					}
				})

			},
			upSentTask(aaa) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认是否提交[' + aaa + ']?',
					success: res => {
						if (res.cancel) return
						uni.showLoading({
							title: '[' + aaa + ']库位提交中!',
							mask: true
						})
						const params = {
							"locationNo": aaa,
							"type": 1
						}
						that.$api.postAPI('/Task/SendRcsEmptyRecoveryArea', params).then(res => {
							uni.hideLoading()
							if (!res.success) {
								uni.showModal({
									title: '提示',
									content: '任务下发失败:' + res.data
								})
							} else {
								uni.showToast({
									title: '任务下发成功',
								})
							}
						})
					}
				})
			}
		}
	}
</script>


<style scoped>
	.section {
		width: 100vw;
		position: absolute;
		display: flex;
		flex-wrap: wrap;
		top: 20vh;
	}

	.wrap {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-image: url(../../static/check-back.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
	}

	.title {
		position: absolute;
		top: 2.9vh;
		width: 100%;
		font-size: 4.5vh;
		font-weight: bolder;
		color: #fff;
		text-align: center;
	}

	.to_back {
		width: 6vw;
		height: 6vh;
		background-image: url(../../static/reback.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 2vh;
		left: 2vw;
		z-index: 999;
	}

	.box-point1 {
		width: 2.45vw;
		height: 2.45vw;
		border-radius: 50%;
		background-color: #fff;
		margin-left: 3.44vw;
	}
</style>